import BarYCategory from "@/components/BarYCategory";
import VirtualScroll from "@/components/VirtualScroll";
import Title from "../../components/title";
import "./index.less";
const C_2_box = (props: any) => {
  const data = [
    {
      id: 1,
      key: 1,
      time: "12:00:00",
      name: "云步桥",
      type: "客流预警",
    },
    {
      id: 2,
      key: 2,
      time: "12:00:00",
      name: "云步桥",
      type: "客流预警",
    },
    {
      id: 3,
      key: 3,
      time: "2:00:00",
      name: "云步桥",
      type: "客流预警",
    },
    {
      id: 4,
      key: 4,
      time: "12:00:00",
      name: "云步桥",
      type: "客流预警",
    },
    {
      id: 5,
      key: 5,
      time: "12:00:00",
      name: "云步桥",
      type: "客流预警",
    },
    {
      id: 6,
      key: 6,
      time: "12:00:00",
      name: "云步桥",
      type: "客流预警",
    },
  ];
  const warn = [
    { name: "报警", count: 5, color: "#F33636" },
    { name: "拥挤", count: 5, color: "#EDBA21" },
    { name: "适中", count: 5, color: "#11ABED" },
    { name: "舒适", count: 5, color: "#1DED13" },
  ];
  const scenicList = [
    {id:1,key:1, name: "云步桥", value: 1207, percent: 50 },
    {id:2,key:2, name: "云步桥", value: 1207, percent: 50 },
    {id:3,key:3, name: "云步桥", value: 1207, percent: 50 },
    {id:4,key:4, name: "云步桥", value: 1207, percent: 50 },
    {id:5,key:5, name: "云步桥", value: 1207, percent: 50 },
    {id:6,key:6, name: "云步桥", value: 1207, percent: 50 },
    {id:7,key:7, name: "云步桥", value: 1207, percent: 50 },
    {id:8,key:8, name: "云步桥", value: 1207, percent: 50 },
    {id:9,key:9, name: "云步桥", value: 1207, percent: 50 },
    {id:10,key:10, name: "云步桥", value: 1207, percent: 50 },
  ];
  return (
    <div className="flex h-[280px] mt-[20px] gap-[30px]">
      <div className="w-[400px]">
        <Title type title="预警监测"></Title>
        <div className="box_content" style={{ padding: "10px 20px" }}>
          <VirtualScroll
            list={data && data.length ? data : []}
            height={210}
            scrollLength={77}
            render={(item, index) => (
              <div className={"virtual_scroll_item"} key={item.id || index}>
                <div className="dian-name">{item.time}</div>
                <div>
                  {item.name}-
                  <span className="text-[#F43E3E]">{item.type}</span>
                </div>
                <div className="btn">详情</div>
              </div>
            )}
            hoverStop
            speed={20}
            className={"virtual_scroll"}
          />
        </div>
      </div>
      <div className="w-[400px]">
        <Title type title="景区饱和度"></Title>
        <div className="box_content" style={{ padding: "10px 20px" }}>
          <div className="flex gap-[20px]">
            {warn.map((item, index) => (
              <div className="warn_type_item" key={index}>
                {item.name}{" "}
                <span style={{ color: item.color }}>{item.count}</span>
              </div>
            ))}
          </div>
          <div className="mt-[10px]">
            <VirtualScroll
              list={scenicList || []}
              height={150}
              scrollLength={77}
              render={(item, index) => (
                <div className="scenic_list_item" key={index}>
                  <div className="list_name">{item.name}</div>
                  <div className="list_bar">
                    <div
                      className="list_line"
                      style={{ width: item.percent + "%" }}
                    ></div>
                  </div>
                  <div className="list_count">
                    <span>{item.value}</span> 人
                  </div>
                </div>
              )}
              hoverStop
              speed={20}
            />
          </div>
        </div>
      </div>
    </div>
  );
};
export default C_2_box;
